<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>场景管理</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
    <style>
        .container {
            padding: 20px;
            background-color: #f5f7fa;
            min-height: 100vh;
        }
        
        
        .page-footer {
            margin-top: 20px;
            text-align: center;
        }
        
        .footer-description {
            color: #909399;
            font-size: 12px;
            margin: 0;
            padding: 10px 0;
        }
        
        .content-card {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            overflow: hidden;
        }
        
        .tab-content {
            padding: 20px;
        }
        
        .tab-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .tab-title {
            font-size: 18px;
            font-weight: 600;
            color: #303133;
            margin: 0;
        }
        
        .header-actions {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .filter-group {
            display: flex;
            align-items: center;
        }
        
        .button-group {
            display: flex;
            gap: 10px;
        }
        
        .no-project-tip {
            color: #909399;
            font-size: 14px;
            text-align: center;
            padding: 20px;
            background: #f5f7fa;
            border-radius: 4px;
            border: 1px dashed #dcdfe6;
        }
        
        .drawer-content {
            padding: 20px;
            height: calc(100% - 60px);
            overflow-y: auto;
        }
        
        .drawer-footer {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 20px;
            background: #fff;
            border-top: 1px solid #ebeef5;
            text-align: right;
        }
        
        .drawer-footer .el-button {
            margin-left: 10px;
        }
        
        /* 命令配置样式 */
        .command-section {
            margin-top: 10px;
        }
        
        .command-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .command-title {
            font-size: 14px;
            font-weight: 600;
            color: #303133;
        }
        
        .command-list {
            margin-top: 12px;
        }
        
        .command-item {
            background: #f5f7fa;
            border: 1px solid #ebeef5;
            border-radius: 6px;
            padding: 12px;
            margin-bottom: 8px;
        }
        
        .command-item:last-child {
            margin-bottom: 0;
        }
        
        .command-fields {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-top: 8px;
        }
        
        .command-field {
            display: flex;
            flex-direction: column;
            gap: 3px;
        }
        
        .command-field-label {
            font-size: 11px;
            color: #909399;
            font-weight: 500;
        }
        
        .command-field-value {
            font-size: 12px;
            color: #303133;
            padding: 4px 6px;
            background: #fff;
            border-radius: 4px;
            border: 1px solid #ebeef5;
        }
        
        .command-actions {
            display: flex;
            gap: 6px;
        }
        
        .empty-command-state {
            text-align: center;
            padding: 20px;
            color: #909399;
        }
        
        .empty-command-state i {
            font-size: 24px;
            margin-bottom: 8px;
            color: #c0c4cc;
        }
        
        .empty-command-state p {
            margin: 4px 0;
            font-size: 12px;
        }
        
        /* 设备选择弹框样式 */
        .device-list {
            max-height: 300px;
            overflow-y: auto;
        }
        
        .device-item {
            padding: 12px;
            border: 1px solid #ebeef5;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            background: #fff;
            margin-bottom: 8px;
        }
        
        .device-item:hover {
            background: #f5f7fa;
            border-color: #409EFF;
        }
        
        .device-item.selected {
            background: rgba(64, 158, 255, 0.1);
            border-color: #409EFF;
        }
        
        .device-name {
            font-size: 14px;
            font-weight: 500;
            color: #303133;
            margin-bottom: 4px;
        }
        
        .device-type {
            font-size: 12px;
            color: #909399;
        }
        
        /* 参数选择弹框样式 */
        .param-type-tabs {
            display: flex;
            gap: 8px;
            margin-bottom: 16px;
        }
        
        .param-type-tab {
            padding: 8px 16px;
            border: 1px solid #ebeef5;
            border-radius: 6px;
            background: #fff;
            color: #303133;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
        }
        
        .param-type-tab.active {
            background: #409EFF;
            color: #fff;
            border-color: #409EFF;
        }
        
        .param-list {
            max-height: 300px;
            overflow-y: auto;
        }
        
        .param-item {
            padding: 12px;
            border: 1px solid #ebeef5;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            background: #fff;
            margin-bottom: 8px;
        }
        
        .param-item:hover {
            background: #f5f7fa;
            border-color: #409EFF;
        }
        
        .param-item.selected {
            background: rgba(64, 158, 255, 0.1);
            border-color: #409EFF;
        }
        
        .param-name {
            font-size: 14px;
            font-weight: 500;
            color: #303133;
            margin-bottom: 4px;
        }
        
        .param-desc {
            font-size: 12px;
            color: #909399;
        }
        
        /* 控制面板样式 */
        .control-body {
            padding: 20px;
        }
        
        .control-btn {
            height: 36px;
            padding: 0 16px;
            border-radius: 6px;
            border: 1px solid #ebeef5;
            background: #fff;
            color: #303133;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 4px;
        }
        
        .control-btn.primary {
            background: #409EFF;
            color: #fff;
            border-color: #409EFF;
        }
        
        .control-btn.primary:hover {
            background: #66b1ff;
        }
        
        /* 定时计划操作列样式 */
        .schedule-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: flex-start;
        }
        
        .schedule-actions .action-btn {
            margin: 0;
            min-width: 60px;
        }
        
        /* 按月设定日期选择样式 */
        .monthly-days-container {
            max-height: 200px;
            overflow-y: auto;
            border: 1px solid #ebeef5;
            border-radius: 4px;
            padding: 10px;
            background: #fafafa;
        }
        
        .monthly-days-container .el-checkbox {
            margin-right: 15px;
            margin-bottom: 8px;
            width: 60px;
        }
        
        /* 场景名称标签样式 */
        .scene-names {
            display: flex;
            flex-wrap: wrap;
            gap: 2px;
        }
        
        .scene-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .scene-card {
            border: 1px solid #ebeef5;
            border-radius: 8px;
            padding: 20px;
            background: #fff;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .scene-card:hover {
            box-shadow: 0 4px 12px 0 rgba(0,0,0,.15);
            transform: translateY(-2px);
        }
        
        .scene-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .scene-name {
            font-size: 16px;
            font-weight: 600;
            color: #303133;
        }
        
        .scene-last-execution {
            display: flex;
            align-items: center;
            color: #909399;
            font-size: 12px;
        }
        
        .scene-last-execution i {
            margin-right: 4px;
            font-size: 14px;
        }
        
        .time-label {
            margin-right: 4px;
            font-weight: 500;
        }
        
        .scene-project {
            display: flex;
            align-items: center;
            color: #409EFF;
            font-size: 12px;
            margin-bottom: 10px;
            font-weight: 500;
        }
        
        .scene-project i {
            margin-right: 4px;
            font-size: 14px;
        }
        
        .scene-description {
            color: #606266;
            font-size: 14px;
            margin-bottom: 15px;
            line-height: 1.5;
        }
        
        
        .scene-actions {
            display: flex;
            gap: 10px;
        }
        
        .action-btn {
            flex: 1;
            height: 32px;
            font-size: 14px;
        }
        
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #909399;
        }
        
        .empty-state i {
            font-size: 48px;
            margin-bottom: 16px;
            color: #c0c4cc;
        }
        
        .empty-state h3 {
            margin: 0 0 8px 0;
            font-size: 16px;
            color: #606266;
        }
        
        .empty-state p {
            margin: 0;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div id="scene-management">
        <div class="container">
            <!-- Tab页面 -->
            <div class="content-card">
                <el-tabs v-model="activeTab" type="card">
                    <!-- 场景管理Tab -->
                    <el-tab-pane label="场景管理" name="scenes">
                        <div class="tab-content">
                            <div class="tab-header">
                                <h2 class="tab-title">场景列表</h2>
                                <div class="header-actions">
                                    <div class="filter-group">
                                        <el-input
                                            v-model="sceneSearchKeyword"
                                            placeholder="搜索场景名称"
                                            clearable
                                            @input="filterScenes"
                                            style="width: 200px; margin-right: 10px;">
                                            <i slot="prefix" class='bx bx-search'></i>
                                        </el-input>
                                        <el-select v-model="selectedProject" placeholder="选择项目" clearable @change="filterScenes" style="width: 150px; margin-right: 10px;">
                                            <el-option
                                                v-for="project in projects"
                                                :key="project.id"
                                                :label="project.name"
                                                :value="project.id">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <div class="button-group">
                                        <el-button type="primary" @click="addScene">
                                            <i class='bx bx-plus'></i> 新增场景
                                        </el-button>
                                        <el-button @click="refreshScenes">
                                            <i class='bx bx-refresh'></i> 刷新
                                        </el-button>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 场景网格 -->
                            <div v-if="filteredScenes.length > 0" class="scene-grid">
                                <div v-for="scene in filteredScenes" :key="scene.id" class="scene-card" @click="viewScene(scene)">
                                    <div class="scene-header">
                                        <div class="scene-name">{{ scene.name }}</div>
                                        <div class="scene-last-execution">
                                            <i class='bx bx-time'></i>
                                            <span class="time-label">最近执行时间：</span>
                                            {{ scene.lastExecution || '未执行' }}
                                        </div>
                                    </div>
                                    <div class="scene-project">
                                        <i class='bx bx-building'></i>
                                        {{ scene.projectName }}
                                    </div>
                                    <div class="scene-description">{{ scene.description }}</div>
                                    <div class="scene-actions" @click.stop>
                                        <el-button size="mini" type="success" @click="executeScene(scene)">
                                            执行
                                        </el-button>
                                        <el-button size="mini" type="primary" @click="editScene(scene)">编辑</el-button>
                                        <el-button size="mini" type="warning" @click="deleteScene(scene)">删除</el-button>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 空状态 -->
                            <div v-else class="empty-state">
                                <i class='bx bx-category-alt'></i>
                                <h3>暂无场景</h3>
                                <p>点击"新增场景"按钮创建第一个场景</p>
                            </div>
                        </div>
                    </el-tab-pane>
                    
                    <!-- 定时计划Tab -->
                    <el-tab-pane label="定时计划" name="schedules">
                        <div class="tab-content">
                            <div class="tab-header">
                                <h2 class="tab-title">定时计划列表</h2>
                                <div class="header-actions">
                                    <div class="filter-group">
                                        <el-input
                                            v-model="scheduleSearchKeyword"
                                            placeholder="搜索计划名称"
                                            clearable
                                            @input="filterSchedules"
                                            style="width: 200px; margin-right: 10px;">
                                            <i slot="prefix" class='bx bx-search'></i>
                                        </el-input>
                                        <el-select v-model="selectedScheduleProject" placeholder="选择项目" clearable @change="filterSchedules" style="width: 150px; margin-right: 10px;">
                                            <el-option
                                                v-for="project in projects"
                                                :key="project.id"
                                                :label="project.name"
                                                :value="project.id">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <div class="button-group">
                                        <el-button type="primary" @click="addSchedule">
                                            <i class='bx bx-plus'></i> 新增计划
                                        </el-button>
                                        <el-button @click="refreshSchedules">
                                            <i class='bx bx-refresh'></i> 刷新
                                        </el-button>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 定时计划表格 -->
                            <el-table :data="filteredSchedules" style="width: 100%" v-if="filteredSchedules.length > 0">
                                <el-table-column prop="name" label="计划名称" width="180"></el-table-column>
                                <el-table-column prop="sceneNames" label="关联场景" width="140">
                                    <template slot-scope="scope">
                                        <div class="scene-names">
                                            <el-tag 
                                                v-for="(sceneName, index) in scope.row.sceneNames" 
                                                :key="index" 
                                                size="mini" 
                                                type="info" 
                                                style="margin-right: 4px; margin-bottom: 2px;">
                                                {{ sceneName }}
                                            </el-tag>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="projectName" label="所属项目" width="120"></el-table-column>
                                <el-table-column prop="cronExpression" label="执行时间" width="180"></el-table-column>
                                <el-table-column prop="status" label="状态" width="100">
                                    <template slot-scope="scope">
                                        <el-tag :type="scope.row.status === 'active' ? 'success' : 'info'" size="mini">
                                            {{ scope.row.status === 'active' ? '启用' : '禁用' }}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="lastRun" label="最近执行时间" width="180"></el-table-column>
                                <el-table-column label="操作" width="280">
                                    <template slot-scope="scope">
                                        <div class="schedule-actions">
                                            <el-button size="mini" :type="scope.row.status === 'active' ? 'danger' : 'success'" 
                                                      @click="toggleSchedule(scope.row)" class="action-btn">
                                                {{ scope.row.status === 'active' ? '禁用' : '启用' }}
                                            </el-button>
                                            <el-button size="mini" type="primary" @click="editSchedule(scope.row)" class="action-btn">编辑</el-button>
                                            <el-button size="mini" type="warning" @click="deleteSchedule(scope.row)" class="action-btn">删除</el-button>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                            
                            <!-- 空状态 -->
                            <div v-else class="empty-state">
                                <i class='bx bx-time-five'></i>
                                <h3>暂无定时计划</h3>
                                <p>点击"新增计划"按钮创建第一个定时计划</p>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            
            <!-- 页脚描述 -->
            <div class="page-footer">
                <p class="footer-description">管理智能建筑中的各种场景配置，包括照明场景、空调场景、安防场景等</p>
            </div>
        </div>
        
        <!-- 新增/编辑场景抽屉 -->
        <el-drawer
            :title="drawerTitle"
            :visible.sync="drawerVisible"
            direction="rtl"
            size="500px"
            :before-close="handleDrawerClose">
            <div class="drawer-content">
                <el-form :model="sceneForm" :rules="sceneRules" ref="sceneForm" label-width="100px">
                    <el-form-item label="场景名称" prop="name">
                        <el-input v-model="sceneForm.name" placeholder="请输入场景名称"></el-input>
                    </el-form-item>
                    <el-form-item label="场景描述" prop="description">
                        <el-input type="textarea" v-model="sceneForm.description" placeholder="请输入场景描述" :rows="4"></el-input>
                    </el-form-item>
                    <el-form-item label="所属项目" prop="projectId">
                        <el-select v-model="sceneForm.projectId" placeholder="请选择所属项目" style="width: 100%;" @change="onProjectChange">
                            <el-option 
                                v-for="project in projects.filter(p => p.id !== 1)" 
                                :key="project.id" 
                                :label="project.name" 
                                :value="project.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    
                    <!-- 执行命令列表 -->
                    <el-form-item label="执行命令" prop="commands">
                        <div v-if="!sceneForm.projectId" class="no-project-tip">
                            请先选择所属项目
                        </div>
                        <div v-else class="command-section">
                            <div class="command-header">
                                <span class="command-title">执行命令列表</span>
                                <el-button size="mini" type="primary" @click="addCommand" :disabled="!sceneForm.projectId">
                                    <i class='bx bx-plus'></i> 新增执行对象
                                </el-button>
                            </div>
                            
                            <!-- 命令列表 -->
                            <div class="command-list" v-if="sceneForm.commands && sceneForm.commands.length > 0">
                                <div v-for="(command, index) in sceneForm.commands" :key="index" class="command-item">
                                    <div class="command-header">
                                        <div class="command-title">执行命令 {{ index + 1 }}</div>
                                        <div class="command-actions">
                                            <el-button size="mini" type="primary" @click="editCommand(index)">编辑</el-button>
                                            <el-button size="mini" type="danger" @click="deleteCommand(index)">删除</el-button>
                                        </div>
                                    </div>
                                    <div class="command-fields">
                                        <div class="command-field">
                                            <div class="command-field-label">设备名称</div>
                                            <div class="command-field-value">{{ command.deviceName }}</div>
                                        </div>
                                        <div class="command-field">
                                            <div class="command-field-label">传感器名称</div>
                                            <div class="command-field-value">{{ command.sensorName }}</div>
                                        </div>
                                        <div class="command-field">
                                            <div class="command-field-label">传感器类型</div>
                                            <div class="command-field-value">{{ command.sensorType }}</div>
                                        </div>
                                        <div class="command-field">
                                            <div class="command-field-label">执行命令</div>
                                            <div class="command-field-value">{{ command.command }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 空状态 -->
                            <div v-else class="empty-command-state">
                                <i class='bx bx-list-ul'></i>
                                <p>暂无执行命令</p>
                                <p>点击"新增执行对象"添加命令</p>
                            </div>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <div class="drawer-footer">
                <el-button @click="handleDrawerClose">取消</el-button>
                <el-button type="primary" @click="saveScene">确定</el-button>
            </div>
        </el-drawer>
        
        <!-- 设备选择弹框 -->
        <el-dialog title="选择设备" :visible.sync="deviceModalVisible" width="400px">
            <div class="device-list">
                <div v-for="device in availableDevices" :key="device.id" 
                     class="device-item" 
                     :class="{ selected: selectedDevice && selectedDevice.id === device.id }"
                     @click="selectDevice(device)">
                    <div class="device-name">{{ device.name }}</div>
                    <div class="device-type">{{ device.type }}</div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="deviceModalVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmDeviceSelection">确定</el-button>
            </div>
        </el-dialog>
        
        <!-- 参数选择弹框 -->
        <el-dialog title="选择参数类型" :visible.sync="paramModalVisible" width="400px">
            <div class="param-type-tabs">
                <div class="param-type-tab" 
                     :class="{ active: selectedParamType === 'data' }"
                     @click="selectParamType('data')">数据</div>
                <div class="param-type-tab" 
                     :class="{ active: selectedParamType === 'control' }"
                     @click="selectParamType('control')">控制</div>
            </div>
            <div class="param-list">
                <div v-for="param in currentParams" :key="param.id" 
                     class="param-item"
                     :class="{ selected: selectedParam && selectedParam.id === param.id }"
                     @click="selectParam(param)">
                    <div class="param-name">{{ param.name }}</div>
                    <div class="param-desc">{{ param.desc }}</div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="paramModalVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmParamSelection">确定</el-button>
            </div>
        </el-dialog>
        
        <!-- 控制面板弹框 -->
        <el-dialog :title="controlTitle" :visible.sync="controlModalVisible" width="400px">
            <div class="control-body" v-html="controlContent"></div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="controlModalVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmControl">确定</el-button>
            </div>
        </el-dialog>
        
        <!-- 定时计划编辑/新增抽屉 -->
        <el-drawer
            :title="scheduleDrawerTitle"
            :visible.sync="scheduleDrawerVisible"
            direction="rtl"
            size="600px"
            :before-close="handleScheduleDrawerClose">
            <div class="drawer-content">
                <el-form :model="scheduleForm" :rules="scheduleRules" ref="scheduleForm" label-width="120px">
                    <el-form-item label="计划名称" prop="name">
                        <el-input v-model="scheduleForm.name" placeholder="请输入计划名称"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="所属项目" prop="projectId">
                        <el-select v-model="scheduleForm.projectId" placeholder="请选择所属项目" style="width: 100%;" @change="onScheduleProjectChange">
                            <el-option 
                                v-for="project in projects.filter(p => p.id !== 1)" 
                                :key="project.id" 
                                :label="project.name" 
                                :value="project.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    
                    <el-form-item label="绑定场景" prop="sceneIds">
                        <div v-if="!scheduleForm.projectId" class="no-project-tip">
                            请先选择所属项目
                        </div>
                        <el-select 
                            v-else
                            v-model="scheduleForm.sceneIds" 
                            multiple
                            placeholder="请选择绑定场景（可多选）" 
                            style="width: 100%;"
                            :loading="scheduleSceneLoading">
                            <el-option 
                                v-for="scene in availableScenes" 
                                :key="scene.id" 
                                :label="scene.name" 
                                :value="scene.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    
                    <el-form-item label="周期设定" prop="periodType">
                        <el-radio-group v-model="scheduleForm.periodType" @change="onPeriodTypeChange">
                            <el-radio label="daily">按日</el-radio>
                            <el-radio label="weekly">按周</el-radio>
                            <el-radio label="monthly">按月</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    
                    <!-- 按日设定 -->
                    <el-form-item v-if="scheduleForm.periodType === 'daily'" label="执行时间" prop="dailyTime">
                        <el-time-picker
                            v-model="scheduleForm.dailyTime"
                            format="HH:mm"
                            value-format="HH:mm"
                            placeholder="选择时间">
                        </el-time-picker>
                    </el-form-item>
                    
                    <!-- 按周设定 -->
                    <el-form-item v-if="scheduleForm.periodType === 'weekly'" label="执行日期" prop="weeklyDays">
                        <el-checkbox-group v-model="scheduleForm.weeklyDays">
                            <el-checkbox label="1">周一</el-checkbox>
                            <el-checkbox label="2">周二</el-checkbox>
                            <el-checkbox label="3">周三</el-checkbox>
                            <el-checkbox label="4">周四</el-checkbox>
                            <el-checkbox label="5">周五</el-checkbox>
                            <el-checkbox label="6">周六</el-checkbox>
                            <el-checkbox label="0">周日</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item v-if="scheduleForm.periodType === 'weekly'" label="执行时间" prop="weeklyTime">
                        <el-time-picker
                            v-model="scheduleForm.weeklyTime"
                            format="HH:mm"
                            value-format="HH:mm"
                            placeholder="选择时间">
                        </el-time-picker>
                    </el-form-item>
                    
                    <!-- 按月设定 -->
                    <el-form-item v-if="scheduleForm.periodType === 'monthly'" label="执行日期" prop="monthlyDays">
                        <div class="monthly-days-container">
                            <el-checkbox-group v-model="scheduleForm.monthlyDays">
                                <el-checkbox v-for="day in 31" :key="day" :label="day.toString()">{{ day }}号</el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </el-form-item>
                    <el-form-item v-if="scheduleForm.periodType === 'monthly'" label="执行时间" prop="monthlyTime">
                        <el-time-picker
                            v-model="scheduleForm.monthlyTime"
                            format="HH:mm"
                            value-format="HH:mm"
                            placeholder="选择时间">
                        </el-time-picker>
                    </el-form-item>
                    
                    <el-form-item label="状态" prop="status">
                        <el-radio-group v-model="scheduleForm.status">
                            <el-radio label="active">启用</el-radio>
                            <el-radio label="inactive">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </div>
            <div class="drawer-footer">
                <el-button @click="handleScheduleDrawerClose">取消</el-button>
                <el-button type="primary" @click="saveSchedule">确定</el-button>
            </div>
        </el-drawer>
    </div>

    <!-- 引入Vue和Element UI的JS文件 -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    
    <script>
        const app = new Vue({
            el: '#scene-management',
            data() {
                return {
                    activeTab: 'scenes',
                    selectedProject: 1, // 默认选择"全部项目"
                    selectedScheduleProject: 1, // 定时计划项目筛选，默认选择"全部项目"
                    sceneSearchKeyword: '', // 场景名称搜索关键词
                    scheduleSearchKeyword: '', // 计划名称搜索关键词
                    projects: [
                        { id: 1, name: '全部项目' },
                        { id: 2, name: '办公楼A座' },
                        { id: 3, name: '办公楼B座' },
                        { id: 4, name: '商业中心' },
                        { id: 5, name: '住宅小区' }
                    ],
                    scenes: [
                        {
                            id: 1,
                            name: '办公照明场景',
                            description: '白天办公时间的标准照明配置，提供舒适的办公环境',
                            type: 'lighting',
                            projectId: 2,
                            projectName: '办公楼A座',
                            commands: [
                                {
                                    deviceName: '会议室照明',
                                    sensorName: '开关名称',
                                    sensorType: '控制',
                                    command: '控制开关名称 - 打开'
                                },
                                {
                                    deviceName: '办公区照明',
                                    sensorName: '亮度控制器',
                                    sensorType: '控制',
                                    command: '控制亮度控制器 - 亮度80%'
                                }
                            ],
                            lastExecution: '2024-01-15 09:30:25'
                        },
                        {
                            id: 2,
                            name: '节能模式场景',
                            description: '夜间节能模式，关闭非必要照明，降低空调温度',
                            type: 'energy',
                            projectId: 2,
                            projectName: '办公楼A座',
                            commands: [
                                {
                                    deviceName: '照明系统',
                                    sensorName: '开关名称',
                                    sensorType: '控制',
                                    command: '控制开关名称 - 关闭'
                                },
                                {
                                    deviceName: '空调系统',
                                    sensorName: '空调遥控器',
                                    sensorType: '控制',
                                    command: '控制空调遥控器 - 打开空调 温度22°C 制冷'
                                }
                            ],
                            lastExecution: '2024-01-14 22:00:00'
                        },
                        {
                            id: 3,
                            name: '会议模式场景',
                            description: '会议室专用模式，调整照明和空调到会议最佳状态',
                            type: 'meeting',
                            projectId: 3,
                            projectName: '办公楼B座',
                            commands: [
                                {
                                    deviceName: '会议室照明',
                                    sensorName: '亮度控制器',
                                    sensorType: '控制',
                                    command: '控制亮度控制器 - 亮度60%'
                                },
                                {
                                    deviceName: '会议室空调',
                                    sensorName: '空调遥控器',
                                    sensorType: '控制',
                                    command: '控制空调遥控器 - 打开空调 温度24°C 制冷'
                                }
                            ],
                            lastExecution: '2024-01-15 14:15:30'
                        },
                        {
                            id: 4,
                            name: '安防警戒场景',
                            description: '夜间安防模式，开启所有监控和报警设备',
                            type: 'security',
                            projectId: 4,
                            projectName: '商业中心',
                            commands: [
                                {
                                    deviceName: '监控摄像头',
                                    sensorName: '开关名称',
                                    sensorType: '控制',
                                    command: '控制开关名称 - 打开'
                                },
                                {
                                    deviceName: '红外传感器',
                                    sensorName: '温度',
                                    sensorType: '数据',
                                    command: '采集温度数据'
                                }
                            ],
                            lastExecution: '2024-01-14 18:00:00'
                        },
                        {
                            id: 5,
                            name: '住宅照明场景',
                            description: '住宅区域照明控制场景',
                            type: 'lighting',
                            projectId: 5,
                            projectName: '住宅小区',
                            commands: [
                                {
                                    deviceName: '楼道照明',
                                    sensorName: '开关名称',
                                    sensorType: '控制',
                                    command: '控制开关名称 - 打开'
                                },
                                {
                                    deviceName: '电梯照明',
                                    sensorName: '亮度控制器',
                                    sensorType: '控制',
                                    command: '控制亮度控制器 - 亮度50%'
                                }
                            ],
                            lastExecution: '2024-01-15 19:00:00'
                        }
                    ],
                    schedules: [
                        {
                            id: 1,
                            name: '工作日照明计划',
                            sceneNames: ['办公照明场景'],
                            projectId: 2,
                            projectName: '办公楼A座',
                            sceneIds: [1],
                            periodType: 'weekly',
                            dailyTime: '',
                            weeklyDays: ['1', '2', '3', '4', '5'],
                            weeklyTime: '09:00',
                            monthlyDays: [],
                            monthlyTime: '',
                            cronExpression: '0 9 * * 1,2,3,4,5',
                            status: 'active',
                            lastRun: '2024-01-15 09:00:00'
                        },
                        {
                            id: 2,
                            name: '夜间节能计划',
                            sceneNames: ['节能模式场景'],
                            projectId: 2,
                            projectName: '办公楼A座',
                            sceneIds: [2],
                            periodType: 'daily',
                            dailyTime: '22:00',
                            weeklyDays: [],
                            weeklyTime: '',
                            monthlyDays: [],
                            monthlyTime: '',
                            cronExpression: '0 22 * * *',
                            status: 'active',
                            lastRun: '2024-01-14 22:00:00'
                        },
                        {
                            id: 3,
                            name: '安防启动计划',
                            sceneNames: ['安防警戒场景'],
                            projectId: 4,
                            projectName: '商业中心',
                            sceneIds: [4],
                            periodType: 'daily',
                            dailyTime: '18:00',
                            weeklyDays: [],
                            weeklyTime: '',
                            monthlyDays: [],
                            monthlyTime: '',
                            cronExpression: '0 18 * * *',
                            status: 'active',
                            lastRun: '2024-01-14 18:00:00'
                        },
                        {
                            id: 4,
                            name: '周末会议计划',
                            sceneNames: ['会议模式场景'],
                            projectId: 3,
                            projectName: '办公楼B座',
                            sceneIds: [3],
                            periodType: 'weekly',
                            dailyTime: '',
                            weeklyDays: ['6', '0'],
                            weeklyTime: '08:00',
                            monthlyDays: [],
                            monthlyTime: '',
                            cronExpression: '0 8 * * 0,6',
                            status: 'inactive',
                            lastRun: '2024-01-13 08:00:00'
                        }
                    ],
                    projectDevices: [],
                    deviceLoading: false,
                    projectDevicesData: {
                        2: [ // 办公楼A座
                            { id: 1, name: '会议室照明' },
                            { id: 2, name: '办公区照明' },
                            { id: 3, name: '走廊照明' },
                            { id: 4, name: '照明系统' },
                            { id: 5, name: '空调系统' },
                            { id: 6, name: '电梯系统' }
                        ],
                        3: [ // 办公楼B座
                            { id: 7, name: '会议室照明' },
                            { id: 8, name: '会议室空调' },
                            { id: 9, name: '投影设备' },
                            { id: 10, name: '音响系统' }
                        ],
                        4: [ // 商业中心
                            { id: 11, name: '监控摄像头' },
                            { id: 12, name: '红外传感器' },
                            { id: 13, name: '报警系统' },
                            { id: 14, name: '门禁系统' },
                            { id: 15, name: '消防系统' }
                        ],
                        5: [ // 住宅小区
                            { id: 16, name: '楼道照明' },
                            { id: 17, name: '电梯照明' },
                            { id: 18, name: '门禁照明' },
                            { id: 19, name: '监控摄像头' },
                            { id: 20, name: '对讲系统' }
                        ]
                    },
                    drawerVisible: false,
                    drawerTitle: '新增场景',
                    sceneForm: {
                        name: '',
                        description: '',
                        projectId: '',
                        commands: []
                    },
                    sceneRules: {
                        name: [
                            { required: true, message: '请输入场景名称', trigger: 'blur' }
                        ],
                        description: [
                            { required: true, message: '请输入场景描述', trigger: 'blur' }
                        ],
                        projectId: [
                            { required: true, message: '请选择所属项目', trigger: 'change' }
                        ],
                        commands: [
                            { required: true, message: '请至少添加一个执行命令', trigger: 'change' }
                        ]
                    },
                    // 设备选择和命令配置相关数据
                    deviceModalVisible: false,
                    paramModalVisible: false,
                    controlModalVisible: false,
                    selectedDevice: null,
                    selectedParamType: 'data',
                    selectedParam: null,
                    currentCommandIndex: -1, // -1表示新增，其他表示编辑索引
                    controlTitle: '控制设置',
                    controlContent: '',
                    availableDevices: [],
                    dataParams: [
                        { id: 'temp', name: '温度', desc: '实时温度数据' },
                        { id: 'humidity', name: '湿度', desc: '实时湿度数据' },
                        { id: 'pressure', name: '压力', desc: '实时压力数据' },
                        { id: 'switch_status', name: '开关状态', desc: '开关当前状态' },
                        { id: 'floor', name: '楼层', desc: '设备所在楼层' }
                    ],
                    controlParams: [
                        { id: 'switch', name: '开关名称', desc: '开关类控制器', type: 'switch' },
                        { id: 'aircon', name: '空调遥控器', desc: '空调类控制器', type: 'aircon' },
                        { id: 'opening', name: '开度控制器', desc: '开度类控制器', type: 'opening' },
                        { id: 'brightness', name: '亮度控制器', desc: '亮度类控制器', type: 'brightness' }
                    ],
                    // 控制状态存储
                    currentSwitchState: 'off',
                    currentAirconPower: 'off',
                    currentAirconTemp: 25,
                    currentAirconMode: 'cool',
                    currentBrightness: 50,
                    currentOpening: 0,
                    // 定时计划相关数据
                    scheduleDrawerVisible: false,
                    scheduleDrawerTitle: '新增计划',
                    scheduleSceneLoading: false,
                    availableScenes: [],
                    scheduleForm: {
                        name: '',
                        projectId: '',
                        sceneIds: [],
                        periodType: 'daily',
                        dailyTime: '',
                        weeklyDays: [],
                        weeklyTime: '',
                        monthlyDays: [],
                        monthlyTime: '',
                        status: 'active'
                    },
                    scheduleRules: {
                        name: [
                            { required: true, message: '请输入计划名称', trigger: 'blur' }
                        ],
                        projectId: [
                            { required: true, message: '请选择所属项目', trigger: 'change' }
                        ],
                        sceneIds: [
                            { required: true, message: '请选择绑定场景', trigger: 'change' }
                        ],
                        periodType: [
                            { required: true, message: '请选择周期类型', trigger: 'change' }
                        ],
                        dailyTime: [
                            { required: true, message: '请选择执行时间', trigger: 'change' }
                        ],
                        weeklyDays: [
                            { required: true, message: '请选择执行日期', trigger: 'change' }
                        ],
                        weeklyTime: [
                            { required: true, message: '请选择执行时间', trigger: 'change' }
                        ],
                        monthlyDays: [
                            { required: true, message: '请选择执行日期', trigger: 'change' }
                        ],
                        monthlyTime: [
                            { required: true, message: '请选择执行时间', trigger: 'change' }
                        ]
                    }
                }
            },
            computed: {
                filteredScenes() {
                    let filtered = this.scenes;
                    
                    // 按项目筛选
                    if (this.selectedProject && this.selectedProject !== 1) {
                        filtered = filtered.filter(scene => scene.projectId === this.selectedProject);
                    }
                    
                    // 按名称搜索
                    if (this.sceneSearchKeyword) {
                        filtered = filtered.filter(scene => 
                            scene.name.toLowerCase().includes(this.sceneSearchKeyword.toLowerCase())
                        );
                    }
                    
                    return filtered;
                },
                filteredSchedules() {
                    let filtered = this.schedules;
                    
                    // 按项目筛选
                    if (this.selectedScheduleProject && this.selectedScheduleProject !== 1) {
                        filtered = filtered.filter(schedule => schedule.projectId === this.selectedScheduleProject);
                    }
                    
                    // 按名称搜索
                    if (this.scheduleSearchKeyword) {
                        filtered = filtered.filter(schedule => 
                            schedule.name.toLowerCase().includes(this.scheduleSearchKeyword.toLowerCase())
                        );
                    }
                    
                    return filtered;
                },
                currentParams() {
                    return this.selectedParamType === 'data' ? this.dataParams : this.controlParams;
                }
            },
            methods: {
                addScene() {
                    this.drawerTitle = '新增场景';
                    this.sceneForm = {
                        name: '',
                        description: '',
                        projectId: '',
                        commands: []
                    };
                    this.availableDevices = [];
                    this.drawerVisible = true;
                },
                editScene(scene) {
                    this.drawerTitle = '编辑场景';
                    this.sceneForm = {
                        name: scene.name,
                        description: scene.description,
                        projectId: scene.projectId,
                        commands: scene.commands ? [...scene.commands] : []
                    };
                    // 加载对应项目的设备列表
                    this.availableDevices = this.projectDevicesData[scene.projectId] || [];
                    this.drawerVisible = true;
                },
                onProjectChange(projectId) {
                    // 清空已选择的命令
                    this.sceneForm.commands = [];
                    // 加载对应项目的设备列表
                    this.availableDevices = this.projectDevicesData[projectId] || [];
                },
                saveScene() {
                    this.$refs.sceneForm.validate((valid) => {
                        if (valid) {
                            if (this.drawerTitle === '新增场景') {
                                const selectedProject = this.projects.find(p => p.id === this.sceneForm.projectId);
                                const newScene = {
                                    id: Date.now(),
                                    name: this.sceneForm.name,
                                    description: this.sceneForm.description,
                                    projectId: this.sceneForm.projectId,
                                    projectName: selectedProject ? selectedProject.name : '',
                                    commands: this.sceneForm.commands,
                                    lastExecution: null
                                };
                                this.scenes.push(newScene);
                                this.$message.success('场景创建成功');
                            } else {
                                // 编辑场景逻辑
                                const selectedProject = this.projects.find(p => p.id === this.sceneForm.projectId);
                                const index = this.scenes.findIndex(s => s.id === this.sceneForm.id);
                                if (index > -1) {
                                    this.scenes[index] = {
                                        ...this.scenes[index],
                                        name: this.sceneForm.name,
                                        description: this.sceneForm.description,
                                        projectId: this.sceneForm.projectId,
                                        projectName: selectedProject ? selectedProject.name : '',
                                        commands: this.sceneForm.commands
                                    };
                                }
                                this.$message.success('场景更新成功');
                            }
                            this.drawerVisible = false;
                        }
                    });
                },
                deleteScene(scene) {
                    this.$confirm('确认删除该场景?', '提示', {
                        type: 'warning'
                    }).then(() => {
                        const index = this.scenes.findIndex(s => s.id === scene.id);
                        if (index > -1) {
                            this.scenes.splice(index, 1);
                            this.$message.success('删除成功');
                        }
                    }).catch(() => {});
                },
                executeScene(scene) {
                    // 更新最后执行时间
                    scene.lastExecution = new Date().toLocaleString('zh-CN', {
                        year: 'numeric',
                        month: '2-digit',
                        day: '2-digit',
                        hour: '2-digit',
                        minute: '2-digit',
                        second: '2-digit'
                    });
                    this.$message.success(`场景"${scene.name}"执行成功`);
                },
                viewScene(scene) {
                    this.$message.info(`查看场景: ${scene.name}`);
                },
                refreshScenes() {
                    this.$message.success('场景列表已刷新');
                },
                filterScenes() {
                    // 筛选逻辑已在computed中处理
                    const projectName = this.getProjectName(this.selectedProject);
                    const searchInfo = this.sceneSearchKeyword ? `，搜索: "${this.sceneSearchKeyword}"` : '';
                    this.$message.info(`已筛选项目: ${projectName}${searchInfo}`);
                },
                filterSchedules() {
                    // 筛选逻辑已在computed中处理
                    const projectName = this.getProjectName(this.selectedScheduleProject);
                    const searchInfo = this.scheduleSearchKeyword ? `，搜索: "${this.scheduleSearchKeyword}"` : '';
                    this.$message.info(`已筛选项目: ${projectName}${searchInfo}`);
                },
                getProjectName(projectId) {
                    const project = this.projects.find(p => p.id === projectId);
                    return project ? project.name : '全部项目';
                },
                // 定时计划相关方法
                addSchedule() {
                    this.scheduleDrawerTitle = '新增计划';
                    this.scheduleForm = {
                        name: '',
                        projectId: '',
                        sceneIds: [],
                        periodType: 'daily',
                        dailyTime: '',
                        weeklyDays: [],
                        weeklyTime: '',
                        monthlyDays: [],
                        monthlyTime: '',
                        status: 'active'
                    };
                    this.availableScenes = [];
                    this.scheduleDrawerVisible = true;
                },
                editSchedule(schedule) {
                    this.scheduleDrawerTitle = '编辑计划';
                    this.scheduleForm = {
                        id: schedule.id,
                        name: schedule.name,
                        projectId: schedule.projectId,
                        sceneIds: schedule.sceneIds || [],
                        periodType: schedule.periodType || 'daily',
                        dailyTime: schedule.dailyTime || '',
                        weeklyDays: schedule.weeklyDays || [],
                        weeklyTime: schedule.weeklyTime || '',
                        monthlyDays: schedule.monthlyDays || [],
                        monthlyTime: schedule.monthlyTime || '',
                        status: schedule.status
                    };
                    // 加载对应项目的场景列表
                    this.availableScenes = this.scenes.filter(scene => scene.projectId === schedule.projectId);
                    this.scheduleDrawerVisible = true;
                },
                deleteSchedule(schedule) {
                    this.$confirm('确认删除该定时计划?', '提示', {
                        type: 'warning'
                    }).then(() => {
                        const index = this.schedules.findIndex(s => s.id === schedule.id);
                        if (index > -1) {
                            this.schedules.splice(index, 1);
                            this.$message.success('删除成功');
                        }
                    }).catch(() => {});
                },
                toggleSchedule(schedule) {
                    schedule.status = schedule.status === 'active' ? 'inactive' : 'active';
                    this.$message.success(`定时计划已${schedule.status === 'active' ? '启用' : '禁用'}`);
                },
                refreshSchedules() {
                    this.$message.success('定时计划列表已刷新');
                },
                handleDrawerClose() {
                    this.drawerVisible = false;
                },
                // 定时计划抽屉相关方法
                handleScheduleDrawerClose() {
                    this.scheduleDrawerVisible = false;
                },
                onScheduleProjectChange(projectId) {
                    // 清空已选择的场景
                    this.scheduleForm.sceneIds = [];
                    // 加载对应项目的场景列表
                    this.scheduleSceneLoading = true;
                    setTimeout(() => {
                        this.availableScenes = this.scenes.filter(scene => scene.projectId === projectId);
                        this.scheduleSceneLoading = false;
                    }, 500);
                },
                onPeriodTypeChange() {
                    // 清空时间相关字段
                    this.scheduleForm.dailyTime = '';
                    this.scheduleForm.weeklyDays = [];
                    this.scheduleForm.weeklyTime = '';
                    this.scheduleForm.monthlyDays = [];
                    this.scheduleForm.monthlyTime = '';
                },
                saveSchedule() {
                    this.$refs.scheduleForm.validate((valid) => {
                        if (valid) {
                            // 生成cron表达式
                            const cronExpression = this.generateCronExpression();
                            
                            if (this.scheduleDrawerTitle === '新增计划') {
                                const selectedProject = this.projects.find(p => p.id === this.scheduleForm.projectId);
                                const selectedScenes = this.scenes.filter(s => this.scheduleForm.sceneIds.includes(s.id));
                                const sceneNames = selectedScenes.map(s => s.name);
                                const newSchedule = {
                                    id: Date.now(),
                                    name: this.scheduleForm.name,
                                    sceneNames: sceneNames,
                                    projectId: this.scheduleForm.projectId,
                                    projectName: selectedProject ? selectedProject.name : '',
                                    sceneIds: this.scheduleForm.sceneIds,
                                    periodType: this.scheduleForm.periodType,
                                    dailyTime: this.scheduleForm.dailyTime,
                                    weeklyDays: this.scheduleForm.weeklyDays,
                                    weeklyTime: this.scheduleForm.weeklyTime,
                                    monthlyDays: this.scheduleForm.monthlyDays,
                                    monthlyTime: this.scheduleForm.monthlyTime,
                                    cronExpression: cronExpression,
                                    status: this.scheduleForm.status,
                                    lastRun: null
                                };
                                this.schedules.push(newSchedule);
                                this.$message.success('计划创建成功');
                            } else {
                                // 编辑计划逻辑
                                const selectedProject = this.projects.find(p => p.id === this.scheduleForm.projectId);
                                const selectedScenes = this.scenes.filter(s => this.scheduleForm.sceneIds.includes(s.id));
                                const sceneNames = selectedScenes.map(s => s.name);
                                const index = this.schedules.findIndex(s => s.id === this.scheduleForm.id);
                                if (index > -1) {
                                    this.schedules[index] = {
                                        ...this.schedules[index],
                                        name: this.scheduleForm.name,
                                        sceneNames: sceneNames,
                                        projectId: this.scheduleForm.projectId,
                                        projectName: selectedProject ? selectedProject.name : '',
                                        sceneIds: this.scheduleForm.sceneIds,
                                        periodType: this.scheduleForm.periodType,
                                        dailyTime: this.scheduleForm.dailyTime,
                                        weeklyDays: this.scheduleForm.weeklyDays,
                                        weeklyTime: this.scheduleForm.weeklyTime,
                                        monthlyDays: this.scheduleForm.monthlyDays,
                                        monthlyTime: this.scheduleForm.monthlyTime,
                                        cronExpression: cronExpression,
                                        status: this.scheduleForm.status
                                    };
                                }
                                this.$message.success('计划更新成功');
                            }
                            this.scheduleDrawerVisible = false;
                        }
                    });
                },
                generateCronExpression() {
                    const { periodType, dailyTime, weeklyDays, weeklyTime, monthlyDays, monthlyTime } = this.scheduleForm;
                    
                    if (periodType === 'daily') {
                        const [hour, minute] = dailyTime.split(':');
                        return `${minute} ${hour} * * *`;
                    } else if (periodType === 'weekly') {
                        const [hour, minute] = weeklyTime.split(':');
                        const days = weeklyDays.join(',');
                        return `${minute} ${hour} * * ${days}`;
                    } else if (periodType === 'monthly') {
                        const [hour, minute] = monthlyTime.split(':');
                        const days = monthlyDays.join(',');
                        return `${minute} ${hour} ${days} * *`;
                    }
                    return '';
                },
                // 设备选择和命令配置方法
                addCommand() {
                    this.currentCommandIndex = -1;
                    this.selectedDevice = null;
                    this.selectedParam = null;
                    this.deviceModalVisible = true;
                },
                editCommand(index) {
                    this.currentCommandIndex = index;
                    const command = this.sceneForm.commands[index];
                    // 根据命令信息找到对应的设备和参数
                    this.selectedDevice = this.availableDevices.find(d => d.name === command.deviceName);
                    this.selectedParam = this.dataParams.find(p => p.name === command.sensorName) || 
                                       this.controlParams.find(p => p.name === command.sensorName);
                    this.selectedParamType = command.sensorType === '数据' ? 'data' : 'control';
                    this.deviceModalVisible = true;
                },
                deleteCommand(index) {
                    this.$confirm('确认删除该执行命令?', '提示', {
                        type: 'warning'
                    }).then(() => {
                        this.sceneForm.commands.splice(index, 1);
                        this.$message.success('删除成功');
                    }).catch(() => {});
                },
                selectDevice(device) {
                    this.selectedDevice = device;
                },
                confirmDeviceSelection() {
                    if (!this.selectedDevice) {
                        this.$message.warning('请选择设备');
                        return;
                    }
                    this.deviceModalVisible = false;
                    this.paramModalVisible = true;
                },
                selectParamType(type) {
                    this.selectedParamType = type;
                    this.selectedParam = null;
                },
                selectParam(param) {
                    this.selectedParam = param;
                },
                confirmParamSelection() {
                    if (!this.selectedParam) {
                        this.$message.warning('请选择参数');
                        return;
                    }
                    this.paramModalVisible = false;
                    
                    if (this.selectedParamType === 'data') {
                        // 数据参数直接保存
                        this.saveCommand();
                    } else {
                        // 控制参数需要打开控制面板
                        this.showControlModal();
                    }
                },
                showControlModal() {
                    this.controlTitle = `${this.selectedParam.name} - 控制设置`;
                    this.controlContent = this.generateControlContent();
                    this.controlModalVisible = true;
                },
                generateControlContent() {
                    switch(this.selectedParam.type) {
                        case 'switch':
                            return this.generateSwitchControl();
                        case 'aircon':
                            return this.generateAirconControl();
                        case 'brightness':
                            return this.generateBrightnessControl();
                        case 'opening':
                            return this.generateOpeningControl();
                        default:
                            return '<p>暂不支持此控制类型</p>';
                    }
                },
                generateSwitchControl() {
                    return `
                        <div style="text-align: center; padding: 20px;">
                            <div style="margin-bottom: 20px;">
                                <button class="control-btn" onclick="window.vueInstance.selectSwitchState('on')" 
                                        style="margin-right: 10px; ${this.currentSwitchState === 'on' ? 'background: #409EFF; color: #fff;' : ''}">打开</button>
                                <button class="control-btn" onclick="window.vueInstance.selectSwitchState('off')"
                                        style="${this.currentSwitchState === 'off' ? 'background: #409EFF; color: #fff;' : ''}">关闭</button>
                            </div>
                            <div style="font-size: 14px; color: #909399;">当前状态: ${this.currentSwitchState === 'on' ? '打开' : '关闭'}</div>
                        </div>
                    `;
                },
                generateAirconControl() {
                    return `
                        <div style="margin: 20px 0;">
                            <div style="display: flex; gap: 16px; justify-content: center; margin-bottom: 20px;">
                                <button class="control-btn" onclick="window.vueInstance.selectAirconPower('on')" 
                                        style="flex: 1; height: 50px; font-size: 16px; font-weight: 600; background: #67C23A; color: #fff; border: none; border-radius: 8px;">打开空调</button>
                                <button class="control-btn" onclick="window.vueInstance.selectAirconPower('off')" 
                                        style="flex: 1; height: 50px; font-size: 16px; font-weight: 600; background: #F56C6C; color: #fff; border: none; border-radius: 8px;">关闭空调</button>
                            </div>
                            <div id="airconTempControls" style="text-align: center; display: ${this.currentAirconPower === 'on' ? 'block' : 'none'};">
                                <div style="font-size: 14px; color: #909399; margin-bottom: 12px;">温度调节</div>
                                <div style="display: flex; align-items: center; gap: 16px; justify-content: center;">
                                    <button class="control-btn" onclick="window.vueInstance.changeAirconTemp(-1)" 
                                            style="width: 40px; height: 40px; border-radius: 50%; font-size: 20px; font-weight: bold;">-</button>
                                    <div id="airconTempDisplay" style="font-size: 24px; font-weight: 600; color: #409EFF; min-width: 60px;">${this.currentAirconTemp}°C</div>
                                    <button class="control-btn" onclick="window.vueInstance.changeAirconTemp(1)" 
                                            style="width: 40px; height: 40px; border-radius: 50%; font-size: 20px; font-weight: bold;">+</button>
                                </div>
                                <div style="margin-top: 16px;">
                                    <div style="display: flex; gap: 8px; justify-content: center;">
                                        <button class="control-btn" onclick="window.vueInstance.setAirconMode('cool')" 
                                                style="padding: 8px 16px; border-radius: 20px; font-size: 14px; ${this.currentAirconMode === 'cool' ? 'background: #409EFF; color: #fff;' : ''}">制冷</button>
                                        <button class="control-btn" onclick="window.vueInstance.setAirconMode('heat')" 
                                                style="padding: 8px 16px; border-radius: 20px; font-size: 14px; ${this.currentAirconMode === 'heat' ? 'background: #409EFF; color: #fff;' : ''}">制热</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                },
                generateBrightnessControl() {
                    return `
                        <div style="text-align: center; padding: 20px;">
                            <div style="margin-bottom: 20px;">
                                <label style="display: block; margin-bottom: 8px; font-size: 14px;">亮度调节</label>
                                <input type="range" id="brightnessRange" min="0" max="100" value="${this.currentBrightness}" 
                                       style="width: 100%; margin-bottom: 8px;" oninput="window.vueInstance.updateBrightness(this.value)">
                                <div id="brightnessValue" style="font-size: 14px; color: #409EFF;">${this.currentBrightness}%</div>
                            </div>
                        </div>
                    `;
                },
                generateOpeningControl() {
                    return `
                        <div style="text-align: center; padding: 20px;">
                            <div style="margin-bottom: 20px;">
                                <label style="display: block; margin-bottom: 8px; font-size: 14px;">开度调节</label>
                                <input type="range" id="openingRange" min="0" max="100" value="${this.currentOpening}" 
                                       style="width: 100%; margin-bottom: 8px;" oninput="window.vueInstance.updateOpening(this.value)">
                                <div id="openingValue" style="font-size: 14px; color: #409EFF;">${this.currentOpening}%</div>
                            </div>
                        </div>
                    `;
                },
                // 控制面板交互方法
                selectSwitchState(state) {
                    this.currentSwitchState = state;
                    this.controlContent = this.generateSwitchControl();
                },
                selectAirconPower(power) {
                    this.currentAirconPower = power;
                    this.controlContent = this.generateAirconControl();
                },
                changeAirconTemp(delta) {
                    if (this.currentAirconPower !== 'on') return;
                    this.currentAirconTemp = Math.max(16, Math.min(30, this.currentAirconTemp + delta));
                    this.controlContent = this.generateAirconControl();
                },
                setAirconMode(mode) {
                    if (this.currentAirconPower !== 'on') return;
                    this.currentAirconMode = mode;
                    this.controlContent = this.generateAirconControl();
                },
                updateBrightness(value) {
                    this.currentBrightness = parseInt(value);
                    document.getElementById('brightnessValue').textContent = value + '%';
                },
                updateOpening(value) {
                    this.currentOpening = parseInt(value);
                    document.getElementById('openingValue').textContent = value + '%';
                },
                confirmControl() {
                    this.controlModalVisible = false;
                    this.saveCommand();
                },
                saveCommand() {
                    // 生成命令信息
                    let commandInfo = '';
                    if (this.selectedParamType === 'data') {
                        commandInfo = `采集${this.selectedParam.name}数据`;
                    } else {
                        // 根据控制类型生成具体的命令信息
                        if (this.selectedParam.type === 'switch') {
                            commandInfo = `控制${this.selectedParam.name} - ${this.currentSwitchState === 'on' ? '打开' : '关闭'}`;
                        } else if (this.selectedParam.type === 'aircon') {
                            if (this.currentAirconPower === 'off') {
                                commandInfo = `控制${this.selectedParam.name} - 关闭空调`;
                            } else {
                                const modeText = this.currentAirconMode === 'cool' ? '制冷' : '制热';
                                commandInfo = `控制${this.selectedParam.name} - 打开空调 温度${this.currentAirconTemp}°C ${modeText}`;
                            }
                        } else if (this.selectedParam.type === 'brightness') {
                            commandInfo = `控制${this.selectedParam.name} - 亮度${this.currentBrightness}%`;
                        } else if (this.selectedParam.type === 'opening') {
                            commandInfo = `控制${this.selectedParam.name} - 开度${this.currentOpening}%`;
                        } else {
                            commandInfo = `控制${this.selectedParam.name}`;
                        }
                    }
                    
                    // 创建或更新命令项
                    const newCommand = {
                        deviceName: this.selectedDevice.name,
                        sensorName: this.selectedParam.name,
                        sensorType: this.selectedParamType === 'data' ? '数据' : '控制',
                        command: commandInfo
                    };
                    
                    if (this.currentCommandIndex === -1) {
                        // 新增命令
                        this.sceneForm.commands.push(newCommand);
                    } else {
                        // 编辑命令
                        this.$set(this.sceneForm.commands, this.currentCommandIndex, newCommand);
                    }
                    
                    this.$message.success('命令保存成功');
                }
            }
        });
        
        // 设置全局引用，以便控制面板的onclick事件可以访问
        window.vueInstance = app;
    </script>
</body>
</html>
